<script setup lang="ts">
import { deleteMusic } from '@/api/source'
import { getMusicById } from '@/api/music'
import type { Music } from '@/stores/player'
import { ElMessage, ElMessageBox } from 'element-plus'
import { usePlayerStore } from '@/stores/player'

const playerStore = usePlayerStore()

// 更新 Music 类型定义
interface Music {
  id: string
  title: string
  artist: string
  cover: string
  duration: string
  url: string
  lrc: string
}

const props = defineProps<{
  musicList: Music[]
}>()

const emit = defineEmits<{
  (e: 'delete-success'): void
  (e: 'show-upload'): void
}>()

// 新增播放功能
const playMusic = async (music: Music) => {
  try {
    const musicDetail = await getMusicById(music.id)
    await playerStore.playMusic(musicDetail)
    playerStore.isPlaying = true
  } catch (error) {
    console.error('播放音乐失败:', error)
  }
}

// 处理删除
const handleDelete = async (id: string, event: Event) => {
  // 阻止事件冒泡,避免触发行点击
  event.stopPropagation()
  try {
    await ElMessageBox.confirm('确定要删除这首歌吗？', '提示', {
      type: 'warning'
    })
    
    const result = await deleteMusic(id)
    if (result.success) {
      ElMessage.success('删除成功')
      emit('delete-success')
    } else {
      ElMessage.error(result.message)
    }
  } catch (e) {
    // 用户取消删除
  }
}

// 添加格式化时长的函数
const formatDuration = (duration: string) => {
  const seconds = parseInt(duration)
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}
</script>

<template>
  <section class="music-list-section">

    <!-- -------------------禁用遮罩层------------------- -->
<!--     
    <div class="disabled-mask">
      <div class="disabled-content">
        <i class="el-icon-lock"></i>
        <h3>测试期间关闭</h3>
        <p>暂时关闭，数据库容量有限</p>
      </div>
    </div> 
    -->
    <!-- -------------------禁用遮罩层------------------- -->
    
    <h2>我的音乐</h2>
    
    <!-- 替换 el-table 为原生 table -->
    <div class="list-container">
      <table>
        <thead>
          <tr>
            <th width="20%">封面</th>
            <th width="20%">歌曲名称</th>
            <th width="20%">歌手</th>
            <th width="20%">时长</th>
            <th width="20%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr 
            v-for="music in musicList" 
            :key="music.id"
            class="music-item"
            @click="playMusic(music)"
          >
            <td>
              <div class="cover-wrapper">
                <img 
                  :src="music.cover" 
                  :alt="music.title" 
                  class="cover"
                >
                <div class="play-icon">
                  <i class="iconfont icon-play"></i>
                </div>
              </div>
            </td>
            <td class="song-title">{{ music.title }}</td>
            <td class="artist">{{ music.artist }}</td>
            <td class="duration">{{ formatDuration(music.duration) }}</td>
            <td class="actions">
              <button 
                class="btn delete-btn"
                @click.stop="handleDelete(music.id, $event)"
              >
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态展示 -->
      <div v-if="!musicList?.length" class="empty-block">
        <el-empty 
          description="还没有创作过歌曲" 
          :image-size="100"
        >
          <template #extra>
            <el-button 
              type="primary"
              @click="$emit('show-upload')"
            >
              立即创作
            </el-button>
          </template>
        </el-empty>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.music-list-section {
  position: relative;
  width: 100%;
  padding: 24px;
  background: color-mix(in srgb, var(--bgc-color-2) 40%, transparent);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);

  h2 {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 28px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, var(--primary-color), var(--theme-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .list-container {
    width: 100%;
    overflow-x: auto;
  }

  table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: separate;

    thead tr th {
      padding: 16px;
      text-align: left;
      color: color-mix(in srgb, var(--primary-color) 90%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
      font-weight: 500;
    }
  }

  td {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
    color: var(--primary-color);
    vertical-align: middle;
    height: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-item {
    background: color-mix(in srgb, var(--bgc-color-2) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
    transition: all 0.2s ease;
    cursor: pointer;

    &:hover {
      background: color-mix(in srgb, var(--theme-color) 10%, transparent);
      border-color: color-mix(in srgb, var(--theme-color) 20%, transparent);
    }
  }

  .cover-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;

    .cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    &:hover .play-icon {
      opacity: 1;
    }
  }

  .delete-btn {
    background: rgba(255, 77, 79, 0.1);
    border: 1px solid rgba(255, 77, 79, 0.6);
    color: #ff4d4f;
    transition: all 0.3s ease;
    padding: 8px 16px;
    height: 32px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;

    &:hover {
      background: #ff4d4f;
      color: #fff;
      border-color: #ff4d4f;
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
    }

    &:active {
      transform: translateY(-1px);
    }
  }

  .empty-block {
    padding: 48px 0;
  }

  // -------------------禁用遮罩层-------------------
  .disabled-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 20px;
  }

  .disabled-content {
    text-align: center;
    color: var(--primary-color);
    
    i {
      font-size: 48px;
      margin-bottom: 16px;
      color: var(--theme-color);
    }
    
    h3 {
      font-size: 24px;
      margin-bottom: 8px;
      background: linear-gradient(to right, var(--primary-color), var(--theme-color));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    p {
      color: rgba(var(--primary-color), 0.3);
      font-size: 16px;
    }
  }
  
}
</style> 